<template>
	<div id="historical_orders">

		<el-table :data="historicalOrdersItems" style="width: 100%" height="600px">

			<el-table-column fixed min-width="1%">
			</el-table-column>
			<el-table-column fixed prop="id" label="订单编号" min-width="8%">
				<!-- 				<template slot-scope="scope" v-if="scope.row.imageUrl">
					
					<el-image style="width: 100px; height: 50px"
						:src="require('@/assets/equipments/'+scope.row.imageUrl)"
						:preview-src-list="[require('@/assets/equipments/'+scope.row.imageUrl)]" />
				</template> -->
			</el-table-column>
			<el-table-column fixed prop="createTime" label="订单详情" min-width="18%" sortable>
				<template slot-scope="scope">
					<div class="order_details" @click="toDetails(scope.row.orderDetailsId)">
						<div>{{scope.row.orderDetailsItems}}</div>
						<!-- <div>收货地址:{{scope.row.address}}</div> -->
						<div class="order_details_createTime">订单创建时间：{{ scope.row.createTime | formatDate }}</div>
					</div>
				</template>
			</el-table-column>
			<el-table-column prop="recipient" label="收货人" min-width="5%">
			</el-table-column>
			<el-table-column prop="amount" label="金额" min-width="5%" :sortable="true" :sort-method="sortMethod">
			</el-table-column>
			<el-table-column prop="status" label="支付状态" min-width="5%" :formatter="stateFormat">
			</el-table-column>
			<el-table-column fixed="right" label="操作" min-width="6%">
				<template slot-scope="scope">
					<el-button @click.native.prevent="deleteRow(scope.row.id)" type="danger" icon="el-icon-delete"
						size="small">
					</el-button>
				</template>
			</el-table-column>

		</el-table>
	</div>
</template>

<script>
	import request from '../../../utils/axios/request'
	export default {
		inject: ['reload'],
		data() {
			return {
				historicalOrdersItems: [{
					id: '',
					recipient: '',
					phone: '',
					deliveryAddress: '',
					address: '',
					createTime: '',
					amount: '',
					orderDetailsId: '',
					orderDetailsItems:'',
					status: '',
					userId: ''
				}]
			}
		},
		// filters: {
		// 	timeFilter: function(value) {
		// 		console.log(value)
		// 		return moment(value * 1000).format('YYYY-MM-DD HH:mm:ss')
		// 	}
		// },
		created() {
			request({
				method: 'get',
				url: '/orders/' + 123
			}).then((res) => {
				console.log(res)
				var jsonObj = JSON.parse(JSON.stringify(res.data.data));
				for (var i = 0; i < jsonObj.length; i++) {
					jsonObj[i].id = jsonObj[i].orderId;
					jsonObj[i].recipient = jsonObj[i].orderOwner;
					jsonObj[i].amount = jsonObj[i].orderAmount;
					jsonObj[i].status = jsonObj[i].orderStatus;
					jsonObj[i].address = jsonObj[i].orderAddress;
					jsonObj[i].createTime = jsonObj[i].orderCreatetime;
					jsonObj[i].userId = jsonObj[i].userId;

				}
				this.historicalOrdersItems = jsonObj
				for (var i = 0; i < this.historicalOrdersItems.length; i++) {
					// console.log(this.tableData[i])
					var orderDetailsJsonObj = JSON.parse(JSON.stringify(this.historicalOrdersItems[i].orderDetailsList));
					// console.log('orderDetailsJsonObj')
					// console.log(orderDetailsJsonObj)
				
					let t = orderDetailsJsonObj.map((obj) => {
						return " " + obj.eName + " " + "￥" + obj.eRealprice + " " + obj.eCount + "件"
					}).join(",")
					// console.log(t)
					this.historicalOrdersItems[i].orderDetailsItems = t
					// console.log('orderDetailsJsonObj')
					let orderItems = this.historicalOrdersItems[i].orderDetailsList.join(",");
				}
				console.log('this.historicalOrdersItems')
				console.log(this.historicalOrdersItems)
				console.log('this.historicalOrdersItems')
			})
		},
		mounted() {

		},
		methods: {
			toDetails(ODId) {
				// console.log('ODId')
				// console.log(ODId)
				sessionStorage.setItem('odid', ODId)

				this.$router.push({
					path: 'userHistoricalOrdersDetails',
					query: {
						data: ODId
					}
				})

			},
			clickRowHandle(row, column, event) {
				console.log('row, column, event')
				console.log(row)
				console.log(column)
				console.log(event)
				console.log('row, column, event')
				if (this.expands.includes(row.id)) {
					this.expands = this.expands.filter(val => val !== row.id);
				} else {
					this.expands.push(row.id);
				}
				console.log('row.data.orderDetailsId')
				console.log(row.orderDetailsId)
				console.log('row.data.orderDetailsId')
				sessionStorage.setItem('odid', row.orderDetailsId)
				this.toDetails()
			},

			// 按照数字大小排序 方法-
			sortMethod(before, after) {
				// console.log('before')
				// console.log(before.orderAmount)
				// console.log('after')
				return Number(before.orderAmount) - Number(after.orderAmount);
			},
			stateFormat(row, column) {
				if (row.status === true) {
					return '已支付'
				} else {
					return '未支付'
				}
			},
			// 逻辑删除历史订单
			deleteRow(id) {
				this.$confirm('此操作将删除历史订单, 是否继续?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(async () => {
					request({
						method: 'put',
						url: '/orders/logicDelete/' + id, //根据订单id将order_isShowToUser设为false
					}).then((res) => {
						console.log(res)
						this.reload();
					})
				}).catch((e) => {
					// console.log(e)
					this.$message.info('已取消删除')
				})
			},
		}
	}
</script>

<style>
	.demo-table-expand {
		font-size: 0;
	}

	.demo-table-expand label {
		width: 90px;
		color: #99a9bf;
	}

	.demo-table-expand .el-form-item {
		margin-right: 0;
		margin-bottom: 0;
		width: 50%;
	}

	.order_details_createTime {
		width: 100%;
		height: 12px;
		line-height: 12px;
		font-size: 12px;
		display: flex;
		flex-direction: row-reverse;
		/* background-color: #ffaaff; */
	}

	.order_details {
		height: 100%;
	}

	.order_details :hover {
		cursor: pointer;
	}

	#UHOD_container {
		width: 100%;
		height: auto;
		overflow-y: hidden;
		overflow-x: hidden;
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		align-items: center;
		background-color: #f4f4f4;
	}
</style>